<template>
    <div class="step">
        <p class="item" v-for="(item,index) in step" :key="index">
            <span class="sub">{{item.subTitle}}</span>
            <span class="title">{{item.title}}</span>
        </p>
    </div>
</template>

<script lang="ts">
  import { Component, Prop, Vue } from 'vue-property-decorator'

  @Component()
  export default class Step extends Vue {
    @Prop() step
  }
</script>

<style scoped lang="less">
    .step {
        .item {
            line-height: 42px;
            position: relative;
            .sub {
                font-size: 14px;
                color: #999;
                padding-right: 10px;
            }
            .title {
                color: #333;
                font-size: 16px;
            }
            &:after {
                content: '';
                position: absolute;
                width: 8px;
                height: 8px;
                background: #4E93FF;
                border-radius: 50%;
                left: -20px;
                top: 18px;
            }
            &:before {
                content: '';
                position: absolute;
                background: #4E93FF;
                width: 2px;
                height: 30px;
                left: -17px;
                top: 28px;
            }
            &:last-child:before {
                display: none;
            }
        }
    }
</style>
